<template>
  <div class="card">
    <el-card
      :shadow="dataModelBase.shadow"
      :body-style="{ padding: `${dataModelBase.bodyStyle}px` }"
    >
      <div slot="header" class="header">
        <span class="header__title">{{ dataModelBase.title }}</span>

        <div class="action">
          <slot name="button" />
        </div>
      </div>

      <slot name="body" />
    </el-card>
  </div>
</template>

<script>
import widget from '@/mixins/widget'

export default {
  mixins: [widget]
}
</script>

<style lang="scss" scoped>
/deep/.is-always-shadow,
.is-hover-shadow {
  box-shadow: 0 0 11px 0 rgba(148, 166, 212, 0.26) !important;
}
/deep/.el-card {
  &__header {
    padding: 4px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccd5e6;
  }
}
.card {
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    &__title {
      color: #333333;
      display: flex;
      align-items: center;
      max-width: 200px;
      &::before {
        content: '';
        display: block;
        width: 4px;
        height: 24px;
        margin-right: 12px;
        background: #3c63b0;
      }
    }
  }
  .action {
    display: flex;
    align-items: center;
  }
}
</style>
